<!-- coba -->

<html> 
    <head> 
        <title>Getting Started Example</title> 
        <link rel="stylesheet" type="text/css" 
              href="/extjs/resources/css/ext-all.css" /> 
        <script src="/extjs/adapter/ext/ext-base.js"></script> 
        <script src="/extjs/ext-all-debug.js"></script>
        <script src="other.js"></script>
        <script>
            Ext.QuickTips.init();
            if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') { 
                Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif'; 
            }         
                        
            var my_form;
            
            var dsprovince =  new Ext.data.JsonStore({  
                url: 'readprovince.php',
                root: 'rows',
                fields: [
                    'id',
                    'name'
                ],            
                autoLoad: true
            });
            
            var dskabkota =  new Ext.data.JsonStore({  
                url: 'readkabkota.php',
                root: 'rows',
                fields: [
                    'id',
                    'name'
                ]//,
               // baseParams: {province_id: 3},
                //autoLoad: true
            });
            
            
            var dsform = new Ext.data.JsonStore({
                url: 'readuser.php',
                root: 'data',
                fields: [
                    'id',
                    'username',
                    'password',
                    'realname',
                    'jenkel',
                    'addr',
                    'province_id',
                    'kabkota_id',
                    'dob',
                    'description'
                ],
                baseParams: {id: 4}//,
                //autoLoad : true
            });  
            
            dskabkota.on('load',function(){
                //alert('Kab Kota','Kab Kota');                
            });
            
            dsprovince.on('load',function(){
                alert('Klik Ok untuk edit'); 
               // dskabkota.load();
            });
            
            dsform.on('load',function(){   
                //alert('Form','Form');  
                my_form.getForm().findField('username').setValue(dsform.getAt(0).data.username);
                my_form.getForm().findField('password').setValue(dsform.getAt(0).data.password);
                my_form.getForm().findField('password2').setValue(dsform.getAt(0).data.password);
                my_form.getForm().findField('realname').setValue(dsform.getAt(0).data.realname);
                my_form.getForm().findField('jenkel').setValue(dsform.getAt(0).data.jenkel);
                my_form.getForm().findField('addr').setValue(dsform.getAt(0).data.addr);
                my_form.getForm().findField('province_id').setValue(dsform.getAt(0).data.province_id);
                dskabkota.load({params: {province_id: dsform.getAt(0).data.province_id}});
                my_form.getForm().findField('kabkota_id').setValue(dsform.getAt(0).data.kabkota_id);               
                my_form.getForm().findField('dob').setValue(dsform.getAt(0).data.dob);
                my_form.getForm().findField('description').setValue(dsform.getAt(0).data.description); 
            });
            
           
            
           
            
            /*var comboProvince = new Ext.form.ComboBox({  
                xtype: 'combo',  
                hiddenName: 'province_id', 
                name : 'province_id',
                fieldLabel: 'Province',  
                mode: 'local',  
                store: dsprovince,  
                displayField:'name',  
                valueField:'id',  
                width: 120,
                listeners:{
                    'select': function(cmb){
                        comboCity.clearValue();
                        dskabkota.load({params: {province_id: cmb.value}})
                    }
                }                                                        
            });*/
            
            /*var comboCity = new Ext.form.ComboBox({  
                xtype: 'combo',  
                hiddenName: 'kabkota_id',                             
                fieldLabel: 'City',  
                mode: 'local',  
                store: dskabkota,  
                displayField:'name',  
                valueField:'id',  
                width: 120  
            });*/
            
            var myform = function(){
                my_form = new Ext.FormPanel({
                    url: 'update_form.php',
                    renderTo: Ext.getBody(),
                    frame: true,
                    title: 'My Form',
                    width: 600,                    
                    items: [{
                            xtype: 'textfield',                              
                            name: 'id',
                            hidden: true
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'User Name',
                            name: 'username',
                            allowBlank : false,
                            vtype: 'alpha'                             
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Password',
                            name: 'password',
                            allowBlank : false,
                            vtype: 'alphanum',
                            inputType: 'password'
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Retype Password',
                            name: 'password2',
                            allowBlank : false,
                            vtype: 'alphanum',
                            inputType: 'password'
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Full Name',
                            name: 'realname',                           
                            allowBlank:false
                        },{  
                            xtype: 'radiogroup',  
                            columns: 1,  
                            fieldLabel: 'Jenis Kelamin',  
                            name: 'jenkel',  
                            items: [{  
                                    name: 'jenkel',  
                                    boxLabel: 'Laki-laki',  
                                    inputValue: '1'  
                                },{  
                                    name: 'jenkel',  
                                    boxLabel: 'Perempuan',  
                                    inputValue: '0'  
                                }]  
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Address',
                            name: 'addr',
                            width:300,
                            allowBlank:false
                        },{  
                            xtype: 'combo',  
                            id : 'provinceCmb',
                            hiddenName: 'province_id', 
                            emptyText: 'Select a province...',
                            name : 'province_id',
                            fieldLabel: 'Province',  
                            mode: 'local',  
                            store: dsprovince,  
                            displayField:'name',  
                            valueField:'id',
                            selectOnFocus: true,
                            triggerAction: 'all',
                            editable: false,
                            width: 120,  
                            lazyInit: false,
                            listeners:{
                                'select': function(){
                                    Ext.getCmp('cityCmb').clearValue();
                                    dskabkota.load({params: {province_id: this.value}});
                                }
                            }                                                        
                        }
                        ,{  
                            xtype: 'combo',  
                            id: 'cityCmb',
                            hiddenName: 'kabkota_id',                             
                            fieldLabel: 'City',  
                            triggerAction: "all",
                            selectOnFocus:true,
                            forceSelection: true,
                            editable: false,
                            mode: 'local',  
                            store: dskabkota, 
                            lazyInit: false,
                            displayField:'name',  
                            valueField:'id',  
                            width: 120  
                        }
                        ,{
                            xtype: 'datefield', 
                            fieldLabel: 'DOB', 
                            name: 'dob',
                            allowBlank:false,
                            format : 'Y-m-d',
                            showToday : true
                        },{  
                            xtype: 'htmleditor',  
                            name: 'description',
                            fieldLabel:'Description',
                            hideLabel: false,  
                            height: 100,  
                            anchor: '100%',
                            allowBlank:false
                        }],
                    buttons: [{
                            text: 'Update',
                            handler: function(){
                                my_form.getForm().submit({
                                    success: function(form, action){
                                        Ext.Msg.alert('Success', action.result.msg);
                                        my_form.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        Ext.Msg.alert('Warning', action.result.msg);
                                    }
                                });
                            }
                        }, {
                            text: 'Reset',
                            handler: function(){
                                //my_form.getForm().reset();
                                Ext.Msg.alert('Success', Ext.getCmp('provinceCmb').getValue());
                            }
                        }]

                });
                
                //dskabkota.load({params: {province_id: 3}});
                dskabkota.load();
                dsform.load();
                //setForm();
                //  dskabkota.load({params: {province_id: 3}});
                          
            }
                
            Ext.onReady(myform);
        </script>
    </head> 
    <body> 
        <!-- Nothing in the body --> 
    </body> 
</html>